<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="审核状态:" prop="keyWord">
          <el-select v-model="query.audit" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发帖时间:">
          <el-date-picker
            v-model="query.createTime"
            type="date"
            placeholder="选择开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核时间:">
          <el-date-picker
            v-model="query.updateTime"
            type="date"
            placeholder="选择开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="发布者：" prop="publisherId">
          <el-select
            v-model="query.publisherId"
            filterable
            remote
            placeholder="请输入发布者"
            :remote-method="remotepublisher"
            clearable
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item class="btn">
          <!-- <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          > -->
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <!-- <el-table-column
        prop="id"
        label="帖子ID"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->
      <el-table-column
        label="序列号"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="releaseTitle"
        label="帖子标题"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="employeeName"
        label="发帖人名"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发帖时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="praiseNum"
        label="点赞数量"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="audit"
        label="审核状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.audit == 0">未审核</span>
          <span v-if="scope.row.audit == 1">已审核</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="releaseContent"
        label="帖子内容"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="审核时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="ToView(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            v-if="scope.row.accessory > 0"
            >查看</el-button
          >

          <el-button
            type="text"
            size="small"
            @click="Download(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            v-if="scope.row.picture > 0"
            >下载</el-button
          >
          <el-button
            v-if="scope.row.audit == 0"
            type="text"
            size="small"
            @click="auditButton(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >审核</el-button
          >
          <el-button
            v-if="scope.row.audit == 1"
            type="text"
            size="small"
            @click="disableButton(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >禁用</el-button
          >

          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deletebutton(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 新增修改对话框 -->
    <!-- 弹窗区域! -->
    <!-- 列表-操作-查看弹出层! -->
    <el-dialog
      title="图片"
      width="400px"
      :visible.sync="dialogVisibles"
      :modal-append-to-body="false"
      :before-close="handleDialogClose"
    >
      <el-carousel height="600px" :autoplay="false">
        <!-- :initial-index="1" -->
        <el-carousel-item v-for="url in forumAccVoList" :key="url">
          <viewer :images="forumAccVoList" class="previewImg">
            <img :src="url" class="previewImg" />
          </viewer>

          <!-- <el-image
            :src="url"
            class="previewImg"
            @click.native="Enlargeimages(url)"
          ></el-image> -->
        </el-carousel-item>
      </el-carousel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 列表-操作-查看-轮播图点击之后的弹出层! -->
    <!-- 查看弹窗! -->
   
  </div>
</template>

<script>
// import Treeselect from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  Postmanagement,
  PostAudit,
  viewButton,
  DownloadButton,
  buttonDelete,
} from "../../../src/assets/js/api";
export default {
  name: "ContentList",
  components: {},
  data() {
    return {

      dialogVisibles: false, //查看按钮弹出层!
      forumAccVoList: [], //表单-操作-查看按钮获取到的评论数据!
      dialogVisible: false,
      showHouse: false,
      showArticle: false,
      editVisible: false,
      title: "",
      total: 10, //总页数!
      pages: 0,
      contentId: false,
      loading: false,
      query: {
        pageSize: 10, //评论列表每页条数!
        pageNo: 1, //评论列表分页!
        audit: null, //审核状态!
        // audits: null,
        createTime: "", //发布时间!
        updateTime: "", //审核时间!
      },
      options: [
        {
          value: 0,
          label: "未审核",
        },
        {
          value: 1,
          label: "已审核",
        },
      ],
      value: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      columnId: [{ itemValue: null, itemText: "不限" }],
      accountData: [],
      tableData: [], //评论列表所有数据!
      whetherData: [],
      whetherState: [],
      deleteStatus: [],
      golbalPermissions: null,
      currentPage: 1,
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        };
      },
    };
  },
  created() {
    this.Postmanagement(); //评论列表!
  },
  methods: {
  
    //查看按钮弹窗关闭前的回调!
    handleDialogClose() {
      this.dialogVisibles = false; //关闭弹窗!
    },
    //操作里面得删除按钮点击事件!
    deletebutton(row) {
      buttonDelete(row.id).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.Postmanagement();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 获取评论表单数据!
    Postmanagement() {
      Postmanagement(this.query).then((res) => {
        let { records } = res.data;
        this.query.audit = records.audit; //审核状态!
        this.tableData = records; //数据列表!
        // 0 1
        this.total = res.data.total; //数据总条数!
      });
    },
    //下载按钮!循环出每个数据里面data的url!然后打开新页面实现下载功能!
    Download(row) {
      let id = row.id;
      DownloadButton(id).then((res) => {
        let urlData = res.data;
        for (let index = 0; index < urlData.length; index++) {
          const element = urlData[index].url;
          window.open(element);
        }
      });
    },
    //审核按钮!
    auditButton(row) {
      this.$confirm("是否审核通过?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        PostAudit({ audit: 1, id: row.id }).then((res) => {
          const msg = res.message;
          this.$message({
            type: "success",
            message: msg,
          });
        });
        this.Postmanagement();
      });
    },
    //禁用按钮!
    disableButton(row) {
      this.$confirm("是否禁止?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        PostAudit({ audit: 0, id: row.id }).then((res) => {
          const msg = res.message;
          this.$message({
            type: "success",
            message: msg,
          });
        });
      });
      this.Postmanagement();
    },

    //查看按钮!
    ToView(row) {
      viewButton(row.id).then((res) => {
        let arr = res.data
          .filter((item) => {
            return item ? true : false;
          })
          .map((item) => {
            return item.url;
          });
        this.forumAccVoList = arr;
      });
      //   commentsView(id).then(res => {
      //     let arr = res.data.forumAccVoList.filter(item => {
      //       return item ? true : false
      //     }).map(item => {
      //       return item.url
      //     })
      //     this.forumAccVoList = arr//查看按钮获取到的当前ID的评论数据!

      //   })
      this.dialogVisibles = true;
    },

    //关闭弹窗
    closeDia() {
      this.showArticle = false;
      this.showHouse = false;
    },

    // 搜索功能
    queryFun() {
      this.query.pageNo = 1;
      this.Postmanagement();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.Postmanagement();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.Postmanagement();
    },
  },
  //监听删除数据如果是这一页的最后一条数据，返回上一页
  //   watch: {
  //     total: function () {
  //       if (
  //         this.total == (this.query.pageNo - 1) * this.query.pageSize &&
  //         this.totalotal != 0
  //       ) {
  //         this.query.pageNo -= 1;
  //         this.getList(); //获取列表数据
  //       }
  //     }
  //   }
};
</script>

<style scoped type="less">
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
.query ::v-deep .el-input__inner
{
    height: 32px;
}
.query ::v-deep .el-input__icon
{
    line-height: 32px;
}
.query ::v-deep .el-form-item
{
    width: 320px;
}
.query ::v-deep .el-form-item__content
{
    width: 210px;
}
.query ::v-deep .vue-treeselect__control
{
    line-height: 30px;  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder
{
    line-height: 30px;
}
.el-col-24 ::v-deep .el-form-item,
.el-col-24 ::v-deep .el-form-item__content
{
    width: 100%;
}
::v-deep .btn .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.box
{
    position: relative;  padding: 20px 20px 50px 20px;  background: #fff;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}
.previewImg
{
    width: 100%;  height: 100%;
}



</style>
